<template>
    <div class=" box">
         <h2>课题设计成绩管理系统</h2>
        <div class="listinfo" v-if="userinfo">
             
            <p> <span style="color:#409EFF">{{userinfo.rolltype=="1"?'用户':'讲师'}}</span> / {{userinfo.username}} </p>
            <el-avatar  :size="40" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596619420629&di=6cd09a7c895eb8bfdf06574258f96878&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6e8f56b2543cce8bffa35b22d03684fae76a1b2c56c32-COdswi_fw658"></el-avatar>
            <el-button @click='signout' type="info" icon="el-icon-delete" circle>退出</el-button>
        </div>
    </div>
       
    
</template>

<script>
export default {
    props:{
        userinfo:Object
    },
    methods:{

       
        signout(){
            this.$alert('你确定要退出登录吗...', '友情提示', {
                confirmButtonText: '确定',
                callback: action => {
                    console.log(action)
                    if(action=='confirm'){
                        sessionStorage.token = "";
                        localStorage.rolltype = "";
                        this.$router.push({
                            name:"login"
                        })
                    }
                }
            });
        }
    }
}
</script>


<style lang="scss" scoped>
.box{
    width:100%;
    height:100%;
    background: #303133;
    padding:0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#fff;
    h2{
        font-size:20px;
        color:#fff;
    }
    .listinfo{
         display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            margin:0 20px;
        }
        .el-avatar{
            margin:0 20px;
            cursor: pointer;
        }
        .el-button{
             margin:0 20px;
        }
    }
}
</style>

